<div class="sp_wrapper">
  <mat-spinner diameter="30" *ngIf="loading$ | async"></mat-spinner>
</div>

<div class="login-policy-mfa-list">
  <div class="mfa" *ngFor="let mfa of list">
    <span>
      {{
        (componentType === LoginMethodComponentType.SecondFactor
          ? 'MFA.SECONDFACTORTYPES.'
          : LoginMethodComponentType.MultiFactor
            ? 'MFA.MULTIFACTORTYPES.'
            : '') + mfa | translate
      }}
    </span>

    <button color="warn" *ngIf="!disabled" mat-icon-button (click)="removeMfa(mfa)" class="rm">
      <i matTooltip="{{ 'ACTIONS.REMOVE' | translate }}" class="las la-times-circle"></i>
    </button>
  </div>
  <div class="mfa-list-btns">
    <button
      mat-stroked-button
      class="new-mfa"
      [disabled]="disabled || availableSelection.length === 0"
      (click)="!disabled ? addMfa() : null"
    >
      <div class="cnsl-action-button">
        <mat-icon class="icon">add</mat-icon>
        <span>{{ 'ACTIONS.ADD' | translate }}</span>
      </div>
    </button>
  </div>
</div>
